<template>
<div id="commonHeader">
  <div class="left">
    <el-button icon="el-icon-menu" size="mini" @click="collapseMune" style="margin-right: 15px"></el-button>
    <el-breadcrumb separator="/">
  <el-breadcrumb-item  v-for="(item,  index) in tabsList" :key="index"  :to="{ path:  item.path }"><span class="last">{{item.label}}</span></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="right">
    <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
   <img src="../assets/image/user.png" alt="">
  </span>
  <el-dropdown-menu slot="dropdown" >
    <el-dropdown-item>个人中心</el-dropdown-item>
    <el-dropdown-item command="out">退出</el-dropdown-item>

  </el-dropdown-menu>
</el-dropdown>
  </div>
   
 </div>
</template>

<script>
import { mapMutations, mapState } from "vuex"
export default {
    methods: {
        ...mapMutations('my-tab', ['collapseMune']),
        //点击退出
        handleCommand(command){
         if(command==='out'){
window.sessionStorage.removeItem("token")
window.sessionStorage.removeItem("router")
this.$router.push("/login")
         }
             
        }
    },
    computed: {
        ...mapState('my-tab', ['tabsList'])
    }

}
</script>
<style lang="less" scoped>
#commonHeader {
    background-color: #333;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

  

    img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
    }
  .left {
    display: flex;
    align-items: center;
   
    .last{
        color: #fff
    }
  }
}
</style>